import { reactive } from 'vue';
import * as echarts from 'echarts';
export default function importFunction() {
  const base = reactive({
    setOption: null,
    radioVal: 'day',
    dynamicStateConfig: null,
  });
  const init = () => {
    handleChange();
  };
  const stratEchar = () => {
    // 绘制图表
    const setOption = {
      color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00', '#FFB330'],
      title: {
        text: base.dynamicStateConfig.title,
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985',
          },
        },
      },
      legend: {
        data: ['carCode', 'gasolineCode', 'batteryCode', 'motorCode', 'controllerCode', 'meterCode'],
      },
      toolbox: {
        feature: {
          saveAsImage: {},
        },
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: base.dynamicStateConfig.xdata,
        },
      ],
      yAxis: [
        {
          type: 'value',
        },
      ],
      series: [
        {
          name: '车架码',
          type: 'line',
          stack: 'Total',
          areaStyle: {},
          emphasis: {
            focus: 'series',
          },
          data: base.dynamicStateConfig.carCode,
        },
        {
          name: '汽油机码',
          type: 'line',
          stack: 'Total',
          areaStyle: {},
          emphasis: {
            focus: 'series',
          },
          data: base.dynamicStateConfig.gasolineCode,
        },
        {
          name: '电池码',
          type: 'line',
          stack: 'Total',
          areaStyle: {},
          emphasis: {
            focus: 'series',
          },
          data: base.dynamicStateConfig.batteryCode,
        },
        {
          name: '电机码',
          type: 'line',
          stack: 'Total',
          areaStyle: {},
          emphasis: {
            focus: 'series',
          },
          data: base.dynamicStateConfig.motorCode,
        },
        {
          name: '控制器码',
          type: 'line',
          stack: 'Total',
          areaStyle: {},
          emphasis: {
            focus: 'series',
          },
          data: base.dynamicStateConfig.controllerCode,
        },
        {
          name: '仪表码',
          type: 'line',
          stack: 'Total',
          areaStyle: {},
          emphasis: {
            focus: 'series',
          },
          data: base.dynamicStateConfig.meterCode,
        },
      ],
    };
    return setOption;
  };

  const handleChange = () => {
    if (base.radioVal === 'day') dayConfig();
    else if (base.radioVal === 'month') monthConfig();
    else yearsConfig();
    const myChart = echarts.init(document.getElementById('main'));
    myChart.setOption(stratEchar());
  };

  const dayConfig = () => {
    base.dynamicStateConfig = {
      title: '24小时动态检测数据',
      xdata: [
        '8h',
        '9h',
        '10h',
        '11h',
        '12h',
        '13h',
        '14h',
        '15h',
        '16h',
        '17h',
        '18h',
        '19h',
        '20h',
        '21h',
        '22h',
        '23h',
        '0h',
        '1h',
        '2h',
        '3h',
        '4h',
        '5h',
        '6h',
        '7h',
      ],
      carCode: getRandomInt(0, 200, 24),
      gasolineCode: getRandomInt(0, 200, 24),
      batteryCode: getRandomInt(0, 200, 24),
      motorCode: getRandomInt(0, 200, 24),
      controllerCode: getRandomInt(0, 200, 24),
      meterCode: getRandomInt(0, 200, 24),
    };
  };
  const monthConfig = () => {
    base.dynamicStateConfig = {
      title: '12个月动态检测数据',
      xdata: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
      carCode: getRandomInt(1000, 3000, 12),
      gasolineCode: getRandomInt(1000, 3000, 12),
      batteryCode: getRandomInt(1000, 3000, 12),
      motorCode: getRandomInt(1000, 3000, 12),
      controllerCode: getRandomInt(1000, 3000, 12),
      meterCode: getRandomInt(1000, 3000, 12),
    };
  };
  const yearsConfig = () => {
    base.dynamicStateConfig = {
      title: '近今年数据统计器',
      xdata: ['2020', '2021', '2022', '2023'],
      carCode: getRandomInt(10000, 30000, 4),
      gasolineCode: getRandomInt(10000, 30000, 4),
      batteryCode: getRandomInt(10000, 30000, 4),
      motorCode: getRandomInt(10000, 30000, 4),
      controllerCode: getRandomInt(10000, 30000, 4),
      meterCode: getRandomInt(10000, 30000, 4),
    };
  };

  const getRandomInt = (min, max, mun) => {
    const steam = [];
    for (let a = 0; a <= mun; a++) {
      min = Math.ceil(min);
      max = Math.floor(max);
      steam.push(Math.floor(Math.random() * (max - min + 1)) + min);
    }
    return steam;
  };

  const columns = () => {
    const steam = [
      {
        title: '设备编号',
        key: 'no',
      },
      {
        title: '姓名',
        key: 'name',
      },
      {
        title: '时间',
        key: 'time',
      },
      {
        title: '类型',
        key: 'key',
      },
    ];
    return steam;
  };

  const dataPom = () => {
    const steam = [
      {
        no: '001',
        name: '张三',
        time: '14:10:00',
        key: '汽车架',
      },
      {
        no: '001',
        name: '张三',
        time: '14:11:10',
        key: '汽车架',
      },
      {
        no: '001',
        name: '张三',
        time: '14:12:30',
        key: '汽车架',
      },
      {
        no: '002',
        name: '李四',
        time: '14:13:35',
        key: '汽油机码',
      },
      {
        no: '002',
        name: '李四',
        time: '14:14:40',
        key: '汽油机码',
      },
      {
        no: '001',
        name: '张三',
        time: '14:15:50',
        key: '汽车架',
      },
      {
        no: '002',
        name: '李四',
        time: '14:16:40',
        key: '汽油机码',
      },
    ];
    return steam;
  };

  return {
    base,
    init,
    handleChange,
    columns,
    dataPom,
  };
}
